<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="单位名称：" >
                        <cascaderDom ref="childOrg" @setOrgInfo="setOrgId1" @setOrgname="setOrgName1"
                                     :orgTree="true" :root-org-id="companyId"></cascaderDom>
                    </FormItem>
                </Col>
                

                <!--
                <Col span="8">
                    <FormItem label="危化品种类：" >
                        <Select class="query-form-el"  v-model="form1.hcmType" label-in-value @on-change='hcmTypeChange1' >
                                <Option v-for="item in hcmTypes" :value="item.hcmType" :key="item.hcmType">{{ item.hcmTypeName }}</Option>
                        </Select>
                    </FormItem>
                </Col>-->
                
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button   class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
        </Form>

        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据！"  :loading="buttonLoading" size="small"
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>


    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js' 
    import {sessionStorage} from '@/common/cacheUtils.js';
    var cascaderDom = () => import('@/components/cascader-dom.vue');

    export default {
        components:{
            cascaderDom
        },
        data(){
            return{
                companyId: sessionStorage('userId').getObject('userId').companyId,
                form1: {
                },
                fileUrl: Api.interestedPartiesUserFile,
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                dataTable:[],
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    //  {
                    //     title: '危化品名称',
                    //     minWidth: 200,
                    //     align: 'center',
                    //     key:'hcmName',
                    // },
                    {
                        title: '所属单位',
                        minWidth: 150,
                        align: 'center',
						fixed: 'left',
                        key:'companyName'
                    },
                    {
                        title: '危化品种类',
                        minWidth: 150,
                        align: 'center',
                        key:'hcmTypeName',
                    },
                    {
                        title: '数量',
                        minWidth: 150,
                        align: 'center',
                        key:'gross'
                    },
                     {
                        title: '存储量（千克）',
                        minWidth: 150,
                        align: 'center',
                        key:'storage'
                    }

                ],
                tableHeight:10,
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods:{
            setOrgId1(data) {
                this.form1.companyId = data[data.length - 1];
            },
            setOrgName1(data) {
                this.form1.companyName = data;
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            reset() {
                this.form1 = {};
                this.$refs.childOrg.resetCurrentOrg();
            },
            query() {
                this.buttonLoading=true
                let userId = sessionStorage('userId').getObject('userId').userId;
                let initOrgId = sessionStorage('userId').getObject('userId').companyId;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    conditions: this.form1
                };

                let url = Api.hcmInfoListStat;
                this.$http.post(url, data).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.data.totalSize;
                    this.buttonLoading=false
                }).catch(e => {
                    console.error(e)
                    this.$Message.error("数据获取失败")
                })
            },

        },
        watch: {}
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
</style>
